import React from "react"
import {NavLink} from "react-router-dom"
import $ from "jquery"
import "./../md/iscroll.js";
import "./../md/touch.min.js";

class product extends React.Component {
	constructor(props){
		super(props);
		this.tap = this.tap.bind(this);
		this.state={
			pic:[],
			i:1
		}
	}
	tap(){
		$('#box').css('display','none')
	}
		componentDidMount(){
			var footer = document.getElementById("footer");
			footer.style.display = "block";
			var brandId = location.href.split(':')[2].split('/')[3];
			var that = this;
			$.ajax({
				type:"get",
				url:"http://w.lefeng.com/api/neptune/brand/details/v1?brandId="+brandId,
				success:function(data){
					var obj = data.data.pmsList;
					$('.dHeader').append("<img src="+data.data.brandImage+">")
					$('.dHeader b').html(obj[0].msg)					
				}
			});
			
			
			//列表页面
			$.ajax({
				type:"get",
				url:"http://w.lefeng.com/api/neptune/goods/list_with_stock/v1?brandId="+brandId+"&star=1",
				success:function(data){
					that.setState({pic:data.data})
				}
			});
			
			//价格排序
			$(".nLeft").click(function(){
				$.ajax({
					type:"get",
					url:"http://w.lefeng.com/api/neptune/goods/list_with_stock/v1?brandId="+brandId+"&start=1&sort=%7B%22vipshopPrice%22%3A%22asc%22%7D",
					success:function(data){
						console.log(data.data)
						var arr = data.data;
						var html ="";
						arr.map(function(v){
							var ob = v.goods;
							html +="<li><a href=#/brand/"+ob.gid+"><img src="+ob.image+" /><p class='tit'><b>"+ob.brandStoreName+"</b><span>"+ob.productName+"</span></p><p class='pri'><strong>￥"+ob.vipshopPrice+"</strong><u>￥"+ob.marketPrice+"</u><i class='iconfont icon-gouwuchekong'></i></p></a></li>"
							$("#list ul").html(html)
						})
					}
				});
			})
			
			//销量排行
			$(".nCenter").click(function(){
				$.ajax({
					type:"get",
					url:"http://w.lefeng.com/api/neptune/goods/list_with_stock/v1?brandId="+brandId+"&start=1&sort=%7B%22sale%22%3A%22desc%22%7D",
					success:function(data){
						console.log(data.data)
						var arr = data.data;
						var html1 ="";
						arr.map(function(v){
							var ob = v.goods;
							html1 +="<li><a href=#/brand/"+ob.gid+"/"+ob.vendorProductId+"><img src="+ob.image+" /><p class='tit'><b>"+ob.brandStoreName+"</b><span>"+ob.productName+"</span></p><p class='pri'><strong>￥"+ob.vipshopPrice+"</strong><u>￥"+ob.marketPrice+"</u><i class='iconfont icon-gouwuchekong'></i></p></a></li>"
							$("#list ul").html(html1)
						})
					}
				});
			})
			
			//筛选
			$(".nRight").click(function(){
				$('#box').css('display','block')
				$.ajax({
					type:"get",
					url:"http://w.lefeng.com/api/neptune/goods/get_thirdcat_size/v1?brandId="+brandId,
					success:function(data){
						console.log(data.data)
						var arr = data.data;
						var html2 ="";
						arr.map(function(v){
							console.log(v.thirdCatName)
							html2+="<li>"+v.thirdCatName+"</li>"
						})
						$("#lis").html(html2);
					}
				});
			})
			//上啦加载，下拉刷新
			var list = document.getElementById("list")
			var iscroll = new IScroll(list,{
	//			mouseWheel: true,
	//			scrollbars: true,
	//			passive: true,
				click:true
			});
			$(document).on('touchend',function(){
			if(iscroll.y > 50){
				console.log(that.state.i)
				that.setState({i:that.state.i+1})
				$.ajax({
					type:"get",
					url:"http://w.lefeng.com/api/neptune/goods/list_with_stock/v1?brandId="+brandId+"&star="+that.state.i,
					success:function(data){
						console.log(data.data)
						var arr = data.data;
						$("#list ul").html('');
						arr.map(function(v){
							var ob = v.goods;
							$("#list ul").append("<li><a href=#/brand/"+ob.gid+"/"+ob.vendorProductId+"><img src="+ob.image+" /><p class='tit'><b>"+ob.brandStoreName+"</b><span>"+ob.productName+"</span></p><p class='pri'><strong>￥"+ob.vipshopPrice+"</strong><u>￥"+ob.marketPrice+"</u><i class='iconfont icon-gouwuchekong'></i></p></a></li>")
							iscroll.refresh();
						})
					}
				});
			}
			if(iscroll.y < iscroll.maxScrollY-50){
				that.setState({i:that.state.i+1})
				$.ajax({
					type:"get",
					url:"http://w.lefeng.com/api/neptune/goods/list_with_stock/v1?brandId="+brandId+"&start="+that.state.i,
					success:function(data){
						var arr = data.data;
						arr.map(function(v){
							var ob = v.goods;
							$("#list ul").append("<li><a href=#/brand/"+ob.gid+"/"+ob.vendorProductId+"><img src="+ob.image+" /><p class='tit'><b>"+ob.brandStoreName+"</b><span>"+ob.productName+"</span></p><p class='pri'><strong>￥"+ob.vipshopPrice+"</strong><u>￥"+ob.marketPrice+"</u><i class='iconfont icon-gouwuchekong'></i></p></a></li>")
							iscroll.refresh();
						})
					}
				});
			}
		})
			setInterval(function(){
				iscroll.refresh();
			},1000)
		}
		
	render() {
		var arr =[];
		this.state.pic.map(function(v,n){
			var ob = v.goods;
//			console.log(ob);
			arr.push(<li key={ob.gid}><NavLink to={`/brand/${ob.gid}/${ob.vendorProductId}`}><img src={ob.image} /><p className="tit"><b>{ob.brandStoreName}</b><span>{ob.productName}</span></p><p className="pri"><strong>￥{ob.vipshopPrice}</strong><u>￥{ob.marketPrice}</u><i className="iconfont icon-gouwuchekong"></i></p></NavLink></li>)
		})
		
		
		
		
		return (
			<div id="detail1">
				<div className="dHeader">
					<b></b>
				</div>
				<div className="nav1">
					<div className="nLeft"><i className="iconfont icon-sort"></i>价格</div>
					<div className="nCenter"><i className="iconfont icon-sort"></i>销量</div>
					<div className="nRight"><i className="iconfont icon-shaixuan"></i>筛选</div>
				</div>
				<div id ="list">
					<ul>
						{arr}
					</ul>
				</div>
				<div id="box">
					<p><span onClick={this.tap}>取消</span><i>筛选</i></p>
					<ul id="lis"></ul>
					<button>确定</button>
				</div>
			</div>
		)
	}

}

export default product;

